<template>
    <view>
        <view class="editor-tab" v-if="viewMode">
            <button @tap.stop.prevent="url" data-type="bool" data-url="isView" :class="'btn round ' + (!isView ? 'bg-blue' : 'bg-grey light') + '  margin-right-xs'">编辑</button>
            <button @tap.stop.prevent="url" data-type="bool" data-url="isView" :class="'btn ' + (isView ? 'bg-blue' : 'bg-grey light') + ' round'">预览</button>
        </view>

        <view enableBackToTop scrollY class="editor-wrapper" :style="'min-height: 400px;' + (viewMode ? 'margin-top:50rpx' : '')">
            <block v-for="(node, index) in nodeListClone" :key="index">
                <view :class="'editor-node-wrapper ' + (cur == index ? 'cur' : '') + ' ' + (isView ? 'is-view' : '')">
                    <textarea
                        :disabled="isView"
                        :id="'editor-node-' + index"
                        v-if="node.type === 'text'"
                        :auto-height="true"
                        cursor-spacing="60"
                        @input="bindTextareaInput"
                        class="editor-textarea"
                        :data-idx="index"
                        maxlength="-1"
                        :value="node.val"
                    ></textarea>
                    <image
                        @tap="url"
                        data-type="image"
                        :data-url="node.val"
                        :id="'editor-node-' + index"
                        v-if="node.type === 'img'"
                        mode="widthFix"
                        class="loading editor-image"
                        :src="node.val"
                        :lazy-load="true"
                    ></image>

                    <view class="editor-delete" v-if="!isView">
                        <!-- <view bindtap="bindTopTap" class="iconfont icon-top" data-idx="{{index}}" wx:if="{{index>1}}"></view> -->
                        <view @tap="bindUpTap" class="iconfont icon-refresharrow up" :data-idx="index" v-if="index > 0"></view>
                        <view @tap="bindDownTap" class="iconfont icon-refresharrow" :data-idx="index" v-if="index < nodeListClone.length - 1"></view>
                        <!-- <view bindtap="bindBottomTap" class="iconfont icon-down" data-idx="{{index}}" wx:if="{{index<(nodeList.length-2)}}"></view> -->
                        <view @tap="bidnDeleteNodeTap" class="iconfont icon-delete" :data-idx="index"></view>
                    </view>
                </view>

                <view class="editor-add-wrapper" v-if="!isView">
                    <view @tap="bindAddTextTap" :data-idx="index">
                        <text class="icon-roundadd margin-right-xs"></text>
                        添加文本
                    </view>
                    <view @tap="bindAddImageTap" :data-idx="index">
                        <text class="icon-pic margin-right-xs"></text>
                        添加图片
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
const pageHelper = require('../../../helper/page_helper.js');
const dataHelper = require('../../../helper/data_helper.js');
const contentCheckHelper = require('../../../helper/content_check_helper.js');
export default {
    data() {
        return {
            cur: -1,

            node: {
                type: '',
                val: ''
            },

            nodeListClone: ''
        };
    },
    options: {
        addGlobalClass: true
    },
    /**
     * 组件的属性列表
     */
    props: {
        nodeList: {
            // [{type:'text/img',val:'txt/cloudId'}]
            type: Array,
            default: () => [
                {
                    type: 'text',
                    val: ''
                }
            ]
        },
        viewMode: {
            type: Boolean,
            default: false
        },
        isView: {
            type: Boolean,
            default: false
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    destroyed: function () {
        // 在组件实例被从页面节点树移除时执行
    },
    /**
     * 组件的方法列表
     */
    methods: {
        ready: function () {},
        attached: function () {},

        url: function (e) {
            pageHelper.url(e, this);
        },

        setGlow(cur) {
            this.setData({
                cur
            });
            setTimeout(() => {
                this.setData({
                    cur: -1
                });
            }, 1000);
        },

        bindAddTextTap: function (e) {
            let idx = pageHelper.dataset(e, 'idx');
            let node = {
                type: 'text',
                val: ''
            };
            let nodeList = this.nodeList;
            nodeList.splice(idx + 1, 0, node);
            this.setData({
                nodeListClone: nodeList
            });
            this.setGlow(idx + 1);
        },

        bindAddImageTap: function (e) {
            let idx = pageHelper.dataset(e, 'idx');
            let that = this;
            uni.chooseImage({
                count: 1,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success(res) {
                    let path = res.tempFilePaths[0];
                    let size = res.tempFiles[0].size;
                    if (!contentCheckHelper.imgTypeCheck(path)) {
                        uni.hideLoading();
                        return pageHelper.showNoneToast('只能上传png、jpg、jpeg格式', 3000);
                    }
                    let maxSize = 10; //TODO setting
                    let imageMaxSize = 1024000 * maxSize;
                    console.log('IMGX SIZE=' + size + 'Byte,' + size / 1024 + 'K');
                    if (!contentCheckHelper.imgSizeCheck(size, imageMaxSize)) {
                        uni.hideLoading();
                        return pageHelper.showModal('图片大小不能超过 ' + maxSize + '兆');
                    }
                    let node = {
                        type: 'img',
                        val: path
                    };
                    let nodeList = that.nodeList;
                    nodeList.splice(idx + 1, 0, node);
                    that.setData({
                        nodeListClone: nodeList
                    });
                    that.setGlow(idx + 1);
                }
            });
        },

        bidnDeleteNodeTap: function (e) {
            let idx = pageHelper.dataset(e, 'idx');
            let nodeList = this.nodeList;
            if (this.nodeList.length == 1) {
                return pageHelper.showNoneToast('至少需要一个内容框');
            }
            nodeList.splice(idx, 1);
            this.setData({
                nodeListClone: nodeList
            });
        },

        bindUpTap: function (e) {
            let idx = pageHelper.dataset(e, 'idx');
            let nodeList = this.nodeList;
            nodeList = dataHelper.arraySwap(nodeList, idx, idx - 1);
            this.setData({
                nodeListClone: nodeList
            });
            pageHelper.anchor('editor-node-' + (idx - 1), this);
            this.setGlow(idx - 1);
        },

        bindTopTap: function (e) {
            let idx = pageHelper.dataset(e, 'idx');
            let nodeList = this.nodeList;
            nodeList = dataHelper.arrayTop(nodeList, idx);
            this.setData({
                nodeListClone: nodeList
            });
            pageHelper.anchor('editor-node-0', this);
            this.setGlow(0);
        },

        bindBottomTap: function (e) {
            let idx = pageHelper.dataset(e, 'idx');
            let nodeList = this.nodeList;
            nodeList = dataHelper.arrayBottom(nodeList, idx);
            this.setData({
                nodeListClone: nodeList
            });
            pageHelper.anchor('editor-node-' + (nodeList.length - 1), this);
            this.setGlow(nodeList.length - 1);
        },

        bindDownTap: function (e) {
            let idx = pageHelper.dataset(e, 'idx');
            let nodeList = this.nodeList;
            nodeList = dataHelper.arraySwap(nodeList, idx, idx + 1);
            this.setData({
                nodeListClone: nodeList
            });
            pageHelper.anchor('editor-node-' + (idx + 1), this);
            this.setGlow(idx + 1);
        },

        bindTextareaInput: function (e) {
            let idx = pageHelper.dataset(e, 'idx');
            let nodeList = this.nodeList;
            let node = nodeList[idx];
            if (node.type == 'text') {
                node.val = e.detail.value;
                nodeList[idx] = node;
                this.setData({
                    nodeListClone: nodeList
                });
            }
        },

        getNodeList: function (e) {
            return this.nodeList;
        }
    },
    created: function () {},
    watch: {
        nodeList: {
            handler: function (newVal, oldVal) {
                this.nodeListClone = newVal;
            },

            immediate: true,
            deep: true
        }
    }
};
</script>
<style>
@import './editor_cmpt.css';
</style>
